@import "Configs";

#facebook {

	.uiMediaThumbWrap {
		@include box-shadow(1px 1px 1px #CCCCCC);
	}

	#contentCol {
		@include box-shadow(0 -1px 3px rgba(0, 0, 0, 0.5));
		@include border-radius(3px);
	}

	.uiButton, 
	.uiButtonSuppressed:active, 
	.uiButtonSuppressed:focus, 
	.uiButtonSuppressed:hover,
	.uiButton:active,
	.uiButtonDepressed {
		@include border-radius(2px);
		&.uiButtonConfirm {
			@include glossy-blue;
			@include transition-fade-blue;
			&:hover {
				@include box-multi-shadow(0px 1px 0px #FFFFFF, 0px 0px 10px rgba(255, 255, 255, 0.6) inset)
			}
			input {
				text-shadow: 0 1px 0 #000000;
			}
		}
	}
	.uiButtonSuppressed:hover {
		@include transparent-gloss;
	}
	.uiUfi .ufiItem,
	.uiBoxLightblue,
	/* chat and translate at bottom */
	.fbNubButton,
	.attachmentBarArea {
		@include nice-blue;
	}
	/* header for side elements */
	.uiHeader,
	/* top stories header */
	.uiStreamHeaderTall,
	.uiBoxGray {
		@include nice-shaded-blue;
	}
	
	/* thumbnail border */
	.uiPhotoThumb,
	.uiMediaThumb,
	.uiTooltip.link {
		@include linear-gradient(#d9e0ea, #b4c3d6);
		@include border-radius(5px);
		border-style:solid;
		border-width: 1px;
		border-top-color: #e9edf3;
		border-right-color: #c3cdde;
		border-bottom-color: #6d80aa;
		border-left-color: #c3cdde;
		img.img,
		.tagWrapper {
			@include border-radius(4px);
			@include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3) inset);
			border-style:solid;
			border-width: 1px;
			border-top-color: #7b8db4;
			border-right-color: #c3cede;
			border-bottom-color: #dee4ed;
			border-left-color: #c3cede;
		}
	}

	/* small profile photos */
	.UIImageBlock_MED_Image, .UIImageBlock_ENT_Image,
	.UIImageBlock_Image.UIImageBlock_SMALL_Image {
		@include border-radius(5px);
		border-style:solid;
		border-width: 1px;
		border-top-color: #e9edf3;
		border-right-color: #c3cdde;
		border-bottom-color: #6d80aa;
		border-left-color: #c3cdde;
		img.img {
			@include border-radius(4px);
		}
	}
	.uiProfilePhoto.UIImageBlock_Image.UIImageBlock_ICON_Image.uiProfilePhotoMedium.img {
		@include border-radius(4px);
		border-style:solid;
		border-width: 1px;
		border-top-color: #e9edf3;
		border-right-color: #c3cdde;
		border-bottom-color: #6d80aa;
		border-left-color: #c3cdde;
	}

	.uiTypeahead {
		@include type-head;
	}
	/* comment area arrow */
	.uiUfi .ufiNub i,
	.ufiNub.uiListItem.uiListVerticalItemBorder,
	.ufiNub.uiListItem {
		background-image: none;
		border-color: transparent transparent adjust-color(#E5EAF1, $lightness:-10);
		border-style: solid;
		border-width: 5px;
		display: block;
		height: 0;
		margin-left: 17px;		
		width: 0;
		height: 0; 
	}
	.sideNavItem {
		&.selectedItem .item {
			@include border-radius(4px 0 0 4px);
			@include glossy-blue;
			@include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.5) inset);
			color: #FFFFFF;
			text-shadow: 0 -1px 0 #000000;
			border-right: medium none;
		}
	}

	.uiTooltip .center .uiTooltipText,
	.uiTooltipText,
	.edit_profilepicture {
		@include glossy-black;
		@include border-radius(3px);
		text-shadow: 0 1px 0 #000000;
	}
	/* side notifications */
	.rfloat {
		border:none;
		.count{
			&.uiSideNavCount {
				@include nice-inset;
			}
		}
	}
	.fbFeedTicker .tickerStoryActive, .fbFeedTicker .tickerStoryClickable:hover, li.item:hover {
		@include nice-blue;
	}
	.uiSideNav .item:hover, .uiSideNav .item:active, .uiSideNav .item:focus, .uiSideNav .subitem:hover, .uiSideNav .subitem:active, .uiSideNav .subitem:focus {
		@include nice-blue;
		color: #333;
		text-shadow: 0 -1px 0 #FFFFFF;
	}

	.uiMenuItem {
		&.selected {
			@include menu-item;
			a {
				border:none;
			}
		}
	}
	/* auto complete tag */
	.uiToken {
		@include menu-item;
	}

	.uiMetaComposerMessageBox {
		@include box-shadow(1px 1px 5px rgba(0, 0, 0, 0.6));
	}

	#blueBar {
		@include box-shadow(1px 1px 0 rgba(255, 255, 255, 0.3) inset);
		@include glossy-blue;
		/* changing logo to transparent mode */
		.slimHeader #pageLogo a, .slimHeader #pageLogo a:hover, .slimHeader #pageLogo a:focus, .slimHeader #pageLogo a:active {
			background-color: transparent;
			@include transition-fade-inset;
		}
		/* right top navigation */
		#pageNav {
			.topNavLink {
				& > a {
					text-shadow: 0 1px 0 #000000;
					@include text-fade;
				}
				ul li  {
					a, label > input {
						&:hover {
							@include glossy-blue;
							text-shadow: 0 -1px 0 #000000;
						}
					}
				}
			}
		}
		.topNavLink a {
		}
		.uiTypeahead {
			@include type-head-light;
		}
		.uiTypeaheadView .search li,
		#jewelContainer {
			&.header {
				@include nice-shaded-blue;
			}
			&.calltoaction,
			&.user,
			&.page,
			&.place,
			&.app {
				&.selected {
					@include menu-item;
					a {
						@include menu-item;
					}
				}
			}
			.jewelFooter:hover {
				a {
					@include glossy-blue;
				}
			}
			/* fb jewel flyout */
			#fbMessagesItemList li,
			#fbNotificationsList li {
				&.selected {
					a {
						@include glossy-blue;
					}
					img.img {
						@include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
					}
				}
			}
		}
	}

	/* some fixes */
	.innerWrap {
		margin-bottom: -1px;
	}
	.wrap {
		margin-bottom: 1px;
	}

	/* chat area */
	.fbChatOrderedList {
		.item {
			a {
				span {
					display:inline-block;
					margin-left: 0;
					-webkit-transition: margin;
					-webkit-transition-timing-function: ease-in;
					-webkit-transition-duration: 200ms;
				}
			}
			&:hover a {
				@include menu-item;
				color:#FFFFFF;
				span {
					margin-left:5px;
					-webkit-transition: margin;
					-webkit-transition-timing-function: ease-out;
					-webkit-transition-duration: 200ms;
				}
			}
		}
	}
}

/* pop ups */
.generic_dialog.pop_dialog {
	.pop_content h2.dialog_title {
		@include glossy-blue;
		@include black-text-shadow;
	}
	.uiTypeahead {
		@include no-box-shadow;
		.wrap {
			margin-bottom: 0;
		}
	}
	/* virtual input element */
	.MessagingComposerTypeaheadWrapper,
	.MessagingComposerContainer {
		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
	}

	.dialog_buttons {
		@include nice-shaded-blue;
	}
}